<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>新闻搜索-首页</title>
    <meta charset="UTF-8">
    <link type="text/css" href="/bootstrap.min.css" rel="stylesheet" media="screen,projection">
</head>
<body>
<div class="container">
    <br><br>
    <h1 class="text-center">新闻搜索</h1>
    <br><br>
    <form action="/searchNews" method="post" class="w-75 m-auto">
        <div class="input-group">
            <input type="text" class="form-control col-10" name="query" th:value="${query}">
            <button type="submit" class="form-control btn btn-primary col-2">搜索</button>
        </div>
    </form>
    <br>
    <div class="w-75 m-auto" th:if="${result}">
        <span th:text="|共搜索到${result.pagedData.totalCount}条结果，耗时${result.costTime}秒|">搜索结果描述</span>
        <div class="list-group">
            <a class="list-group-item list-group-item-action" th:each="news:${result.pagedData.data}" th:href="${news.url}">
                <span class="d-none" th:text="|id:${news.id}|">id</span>
                <div class="d-flex justify-content-between">
                    <h5 th:utext="${news.title}">title</h5>
                    <small th:text="|评分：${news.score}|">score</small>
                </div>
                <p th:utext="${news.content}">content</p>
                <small th:text="|发布时间：${news.postdate}|">postdate</small><br>
                <small th:text="|关键词：${news.keyword}|">keyword</small><br>
                <small th:text="|来源：${news.source}|">source</small><br>
                <small th:text="|回帖数量：${news.reply}|">reply</small><br>
            </a>
        </div>
        <br>
        <div class="d-flex justify-content-center">
            <nav>
                <ul class="pagination" id="paginationUl">
                    <li id="paginationLiTemplate" class="page-item d-none"><a class="page-link" href="#">1</a></li>
                </ul>
            </nav>
            <form action="/searchNews" method="post" class="d-flex" style="width: 120px">
                <input type="hidden" th:value="${query}" name="query">
                <input type="text" class="form-control d-inline ml-1" name="pageNo">
                <button type="submit" class="btn btn-primary">Go</button>
            </form>
        </div>
    </div>
    <br>
    <div class="w-75 m-auto text-center">
        <p>新闻搜索项目实战 Powered By <b>Elasticsearch 8.2.0</b> <b>MySQL 9.2.0</b></p>
        <p>@2025 All right reserved</p>
    </div>
</div>
</body>
<script type="text/javascript" src="/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="/bootstrap.min.js"></script>
<script type="text/javascript" th:inline="javascript">
    var paginationUl = $('#paginationUl');
    var paginationLiTemplate = $('#paginationLiTemplate');
    var result = [[${result}]], query = [[${query}]], curPageNo = [[${pageNo}]];
    if(result !== null) {
        var totalPages = result.pagedData.totalPages;
        for(var i=1;i<=totalPages;i++) {
            if(i === 1) {
                addPagination(paginationUl, paginationLiTemplate, query, i);
            } else if(i === totalPages) {
                addPagination(paginationUl, paginationLiTemplate, query, i);
            } else if(i === parseInt(totalPages / 2)) {
                addPagination(paginationUl, paginationLiTemplate, query, i);
            } else if(i >= curPageNo - 1 && i <= curPageNo + 1) {
                addPagination(paginationUl, paginationLiTemplate, query, i);
            }
        }
    }

    function addPagination(paginationUl,paginationLiTemplate,query,pageNo) {
        var paginationLi = paginationLiTemplate.clone();
        paginationLi.removeClass("d-none");
        var paginationLiA = paginationLi.find("a");
        paginationLiA.attr("href", "/searchNews?query=" + query + "&pageNo=" + pageNo);
        paginationLiA.html(i);
        paginationUl.append(paginationLi);
    }
</script>
</html>